<template>
    <div class="RatioChart" :id="id"></div>
</template>

<script>
export default {
    props: {
        id: {
            type: String,
            default: 'RatioChart'
        },
        value: {
            type: Number,
            default: 50
        },
        color: {
            type: String,
            default: '#05bf7e'
        },
        subtext: {
            type: String,
            default: '金东区'
        }
    },
    mounted() {
        const self = this
        // 垃圾占比
        const RatioChart = self.$echarts.init(document.getElementById(self.id))
        const RatioOption = {
            title: {
                text: `${self.value}%`,
                subtext: self.subtext,
                left: 'center',
                top: 'center', //top待调整
                textStyle: {
                    color: '#000',
                    fontSize: 40,
                    fontWeight: 600
                },
                subtextStyle: {
                    color: '#fff',
                    fontSize: 18,
                    top: 'center'
                },
                itemGap: -4 //主副标题间距
            },
            xAxis: {
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            series: [
                // 内圆
                {
                    type: 'pie',
                    radius: ['0', '50%'],
                    center: ['50%', '50%'],
                    z: 0,
                    itemStyle: {
                        normal: {
                            color: self.color,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [self.value]
                },
                // 进度圈
                {
                    type: 'pie',
                    clockWise: true,
                    radius: ['55%', '70%'],
                    label: {
                        show: false
                    },
                    data: [
                        {
                            value: self.value,
                            itemStyle: {
                                normal: {
                                    color: self.color,
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            }
                        },
                        {
                            value: 100 - self.value,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    color: '#071834',
                                    borderColor: '#071834',
                                    borderWidth: 0
                                }
                            }
                        }
                    ]
                },
                //最外层圈
                {
                    type: 'pie',
                    radius: ['0%', '80%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontWeight: 'bold'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0,0,0,0.05)'
                                    },
                                    {
                                        offset: 0.1,
                                        color: 'rgba(0,0,0,0.1)'
                                    },
                                    {
                                        offset: 0.95,
                                        color: 'rgba(0,0,0,0)'
                                    }
                                ]
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: 100
                        }
                    ]
                }
            ]
        }
        RatioChart.setOption(RatioOption, true)
    }
}
</script>

<style scoped>
.RatioChart {
    width: 100%;
    height: 230px;
}
</style>
